<template>
	<jk-view>
		<jk-operation-card class="margin-bottom-10 margin-top-10 width-100-percent fixed-operation-bar">
			<div class="flex-between-center">
				<div class="flex-start-center">
					<span class="el-icon-star-off item-gap"></span>
					<span>{{ ruleForm.code }}</span>
					<el-tag v-show="ruleForm.id" size="mini" type="info" class="margin-left-10">
						<notice-state-bar :status="ruleForm.auditState"></notice-state-bar>
					</el-tag>
				</div>
				<div class="flex-start-center">
					<jk-button type="info" plain icon="el-icon-back" size="small" class="item-gap" @click="onJumpList">返回列表</jk-button>
					<jk-button v-if="ruleForm.id" type="info" plain icon="el-icon-top-left" size="small" class="item-gap" @click="onJumpOrder">前往订单</jk-button>
					<div><el-button type="primary" :disabled="!ruleForm.id" icon="el-icon-printer" size="small" class="item-gap" @click="onPrintBtn">打印</el-button></div>
					<jk-button v-if="pageType !== 'detail'" class="item-gap" icon="el-icon-finished" :loading="saveBtnLoading" type="primary" @click="onConfirmBtn(0)">保存</jk-button>
					<jk-button v-if="pageType !== 'detail'" :disabled="ruleForm.auditState !== 0" icon="el-icon-finished" :loading="saveBtnLoading" type="success" @click="onConfirmBtn(1)">保存并下达</jk-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :hide-required-asterisk="pageType === 'detail'" label-width="130px" :show-message="false">
				<div ref="box3">
					<div class="margin-bottom-4 flex-between-center">
						<div>
							<el-tag type="primary" effect="plain">
								<span class="el-icon-tickets item-gap"></span>
								<span>基本信息</span>
							</el-tag>
						</div>
						<div class="flex-end-center">
							<machine-state-bar
								v-show="ruleForm.id"
								renovate-permission-prefix="production:prdNoticeMachineChange:complete"
								close-permission-prefix="production:prdNoticeMachineClose"
								open-permission-prefix="production:prdNoticeMachineOpening"
								:machine-task-list="machineTaskList"
								:form-data="ruleForm"
								@on-open="onOpenBtn"
								@on-close="onCloseBtn"
								@on-renovate="finishRenovate"
							></machine-state-bar>
							<technology-notice-bar
								v-show="ruleForm.id"
								:option-list="detailDataMachineList"
								@on-notice="onNoticeBtn"
							></technology-notice-bar>
						</div>
					</div>
					<jk-card>
						<el-row ref="box1" class="flex-start-center-wrap">
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="品种">
									<span class="read-only-2">{{ ruleForm.productName }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="批号">
									<span class="read-only-2">{{ ruleForm.batchCode }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="工序">
									<span class="read-only-2">{{ ruleForm.processName }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="生产类型">
									<span class="read-only-2">{{ ruleForm.ifTest ? '试产打样' : '正式生产' }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="区域">
									<span class="read-only-2">{{ ruleForm.workshopName }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="单据日期">
									<span class="read-only-2">{{ ruleForm.belongDate }}</span>
								</el-form-item>
							</el-col>
						</el-row>

						<jk-divider-card title="排产信息" class="margin-top-10">
							<el-row class="flex-start-center-wrap">
								<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
									<el-form-item class="margin-bottom-10" label="排产数量">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.productionQty }}</span>
										<jk-number-input v-else v-model="ruleForm.productionQty" placeholder="排产数量"></jk-number-input>
									</el-form-item>
								</el-col>
								<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
									<el-form-item class="margin-bottom-10" label="定量(g/m)">
										<div class="flex-start">
											<span v-if="pageType === 'detail' || ruleForm.auditState === 3" class="read-only-2">{{ ruleForm.gramWeight }}</span>
											<jk-number-input v-else v-model="ruleForm.gramWeight" style="width: 100%;" placeholder="克重" @change="onGramWeightChange($event, 'gramWeight')" />
											<span>~</span>
											<span v-if="pageType === 'detail' || ruleForm.auditState === 3" class="read-only-2">{{ ruleForm.meters }}</span>
											<jk-number-input v-else v-model="ruleForm.meters" style="width: 100%;" placeholder="米长" @change="onGramWeightChange($event, 'meters')" />
										</div>
									</el-form-item>
								</el-col>
								<!--输入颜色-->
								<el-col v-if="ruleForm.processCode.toUpperCase() !== 'SM'" :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
									<el-form-item class="margin-bottom-10" :label="getColorInfoByProcess(ruleForm.processCode).inputName">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.inputTubeColorList ? ruleForm.inputTubeColorList.map(x => x.name).join(',') : '' }}</span>
										<checkboxPopover
											v-else
											:title="getColorInfoByProcess(ruleForm.processCode).inputName"
											:default-list.sync="ruleForm.inputTubeColorList"
											:option-list="inputTubeColorList"
											@change="onToggleColorChange($event, 'inputTubeColorList')"
										></checkboxPopover>
									</el-form-item>
								</el-col>
								<!--输出颜色-->
								<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
									<el-form-item class="margin-bottom-10" :label="getColorInfoByProcess(ruleForm.processCode).outName">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.outputTubeColorList ? ruleForm.outputTubeColorList.map(x => x.name).join(',') : '' }}</span>
										<checkboxPopover
											v-else
											:title="getColorInfoByProcess(ruleForm.processCode).outName"
											:default-list.sync="ruleForm.outputTubeColorList"
											:option-list="outTubeColorList"
											@change="onToggleColorChange($event, 'outputTubeColorList')"
										></checkboxPopover>
									</el-form-item>
								</el-col>
								<!--纸管颜色-->
								<el-col v-if="ruleForm.processCode ? ruleForm.processCode.toUpperCase() === 'XS' : false" :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
									<el-form-item class="margin-bottom-10" label="纸管颜色">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.paperTubeList ? ruleForm.paperTubeList.map(x => x.name).join(',') : '' }}</span>
										<checkboxPopover
											v-else
											title="纸管颜色"
											:default-list.sync="ruleForm.paperTubeList"
											:option-list="ltColorList"
										></checkboxPopover>
									</el-form-item>
								</el-col>
								<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
									<el-form-item class="margin-bottom-10" label="日供货量" prop="productionDailyQty1">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.productionDailyQty }}</span>
										<jk-number-input v-else v-model="ruleForm.productionDailyQty" placeholder="日供货量"></jk-number-input>
									</el-form-item>
								</el-col>
								<el-col :xl="18" :lg="16" :md="24" :sm="24" :xs="24">
									<el-form-item class="margin-bottom-10" label="备注">
										<el-input v-model="ruleForm.remark" type="textarea" :rows="1"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</jk-divider-card>
					</jk-card>
				</div>
				<div ref="box2">
					<el-tag type="primary" effect="plain" class="margin-bottom-4 margin-top-10">
						<span class="el-icon-paperclip item-gap"></span>
						<span>工艺信息</span>
					</el-tag>
					<jk-card>
						<el-row class="flex-start-center-wrap">
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="品种工艺单">
									<span v-if="pageType === 'detail' || ruleForm.auditState === 3" class="read-only-2">{{ ruleForm.specSheetCode }}</span>
									<remote-search-technology-order-input
										v-else
										:disabled="!ruleForm.productId"
										placeholder="用户工艺编号"
										only-key="specSheetId"
										query-name="specSheetCode"
										:form-data="ruleForm"
										@on-select="onSelectTechnologyOrderChange"
									></remote-search-technology-order-input>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="设备机型">
									<span class="read-only-2">{{ ruleForm.machineModelName }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="台日单产">
									<span v-if="pageType === 'detail' || ruleForm.auditState === 3" class="read-only-2">{{ ruleForm.dailyYield }}</span>
									<jk-number-input v-else v-model="ruleForm.dailyYield" :disabled="!!ruleForm.specSheetId" style="width: 100%;" placeholder="台日单产" @change="onDailyYieldChange" />
								</el-form-item>
							</el-col>
						</el-row>
					</jk-card>
				</div>
				<div class="flex-between-center margin-bottom-4 margin-top-10">
					<div class="flex-start-center" style="align-items: flex-end">
						<el-button v-if="pageType !== 'detail'" class="item-gap" type="primary" size="mini" icon="el-icon-plus" @click="onAddMachineBtn">生产机台</el-button>
						<span style="font-size: 13px;color: #808695;">(共计: {{ ruleForm.prdNoticeMachineList ? ruleForm.prdNoticeMachineList.length : 0 }}台)</span>
					</div>
					<div class="flex-end-center">
						<!--<div><el-button type="default" :disabled="!ruleForm.id" icon="el-icon-printer" size="mini" class="item-gap" @click="onPrintMachineBtn">打印</el-button></div>-->
						<div class="flex-start-center">
							<span style="font-size: 13px;color: #515a6e;">机台状态:</span>
							<jk-state-bar v-for="(item, index) in openStateList" :key="item.id" class="margin-left-10" :state="item.id" :state-list="openStateList"></jk-state-bar>
						</div>
					</div>
				</div>
				<div>
					<notice-machine-list
						:height="600"
						:process-code="ruleForm.processCode"
						:page-type="pageType"
						:input-color-list="inputTubeColorList"
						:show-input-color="true"
						:out-color-list="outTubeColorList"
						:zl-color-list="ltColorList"
						:machine-list.sync="ruleForm.prdNoticeMachineList"
					></notice-machine-list>
				</div>
			</el-form>
			<select-machine-gantt-dialog
				:form-data="ruleForm"
				:checked-data="checkMachineData"
				:dialog-state="selectMachineGanttDialogState"
				@on-visible-change="onVisibleChangeOfSelectMachineGanttDialog"
				@on-confirm="onConfirmBtnOfSelectMachineGanttDialog"
			></select-machine-gantt-dialog>
			<open-dialog
				:operation-type="openOperationType"
				:select-machine-item="selectMachineItem"
				:dialog-state="openDialogState"
				@on-visible-change="onVisibleChangeOfOpenDialog"
				@on-confirm="onConfirmChangeOfOpenDialog"
			></open-dialog>
			<close-dialog
				:select-machine-item="selectMachineItem"
				:dialog-state="closeDialogState"
				@on-visible-change="onVisibleChangeOfCloseDialog"
				@on-confirm="onConfirmChangeOfCloseDialog"
			></close-dialog>
		</jk-card>
	</jk-view>
</template>

<script>
    import formMixin from './form-mixin';
    export default {
        name: 'XsNoticeOrder',
        mixins: [formMixin],
        data() {
            return {
            };
        },
        methods: {
        },
        mounted() {
            this.getDependentData();
        }
    };
</script>

